{% extends 'subpage/main_base.html' %}
{% block title %}任务列表页{% endblock %}
{% block content %}
    <div class="main-content bgc-grey-100">
        <div class="col-md-12">
            <div class="bgc-white bd bdrs-3 p-20 mT-80">
                <h4 class="c-grey-900 mB-20">
                    Job
                    {% if request.user.is_authenticated() %}
                        {% if "app01.add_job" in perms %}
                        <button type="button" class="btn btn-info pull-right create-job" data-toggle="modal"
                                data-target="#jobModal" data-whatever="创建任务">
                            <i class="fa fa-plus"></i>
                            创建任务
                        </button>
                        {% endif %}
                    {% endif %}
                </h4>
                {% if jobs %}
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>任务标题</th>
                            <th>所属项目</th>
                            <th>任务状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for job in jobs %}
                            <tr data-line='{"job_id":"{{ job.id }}","name":"{{ job.name }}","status":"{{ job.status }}"}' data-id="{{ job.id }}">
                                <td>{{ job.id }}</td>
                                <td>{{ job.name }}</td>
                                <td>{{ project_name }}</td>
                                <td>{{ job.status }}</td>
                                <td>
                                    {% if "app01.delete_job" in perms %}
                                    <a href="javascript:;">
                                        <button class="btn btn-danger" data-target="#deleteModal" data-toggle="modal">删除
                                        </button>
                                    </a>
                                    {% endif %}
                                    <a href="{{ url('app01:task',args=(job.id,)) }}">
                                        <button class="btn btn-info job">
                                            工作
                                       </button>
                                    </a>
                                    {% if "app01.change_job" in perms %}
                                     <a href="javascript:;">
                                        <button class="btn btn-success edit-job" data-target="#jobModal"
                                            data-toggle="modal" data-whatever="修改任务">修改
                                        </button>
                                     </a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                     <ul class="pagination pull-right">
            {% if jobs.has_previous() %}
                <li>
                    <a href="?page={{ jobs.previous_page_number() }}">
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                    </a>
                </li>
            {% endif %}
            {% for page in paginator.page_range %}
                {{ guess_page(jobs.number,page) }}
            {% endfor %}
            {% if jobs.has_next() %}
                <li>
                    <a href="?page={{ jobs.next_page_number() }}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                </li>
            {% endif %}
            <li>
                <a href="?page={{ paginator.num_pages }}">
                    <i class="fa fa-angle-double-right"  aria-hidden="true"></i>
                </a>
            </li>
        </ul>
                {% else %}
                    <p class="text-center text">
                        暂无任务
                    </p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="modal fade" id="jobModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">创建任务</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <span style="display: none">{{ csrf_token }}</span>
                            <label for="" class="col-xs-2 control-label">所属项目</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="name" disabled
                                       value="{{ project_name }}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputJobTitle" class="col-xs-2 control-label">任务名称</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" id="inputJobTitle" placeholder="任务名称"
                                       name="name"/>
                                <span class="error-txt error1"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-xs-2 control-label">完成状态</label>
                            <div class="col-xs-10">
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="notFinished" value="未完成" name="status"/> 未完成
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="finished" value="完成"/> 完成
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="paused" value="暂停"/> 暂停
                                </label>
                                <span class="error-txt error2"></span>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除任务</h4>
                </div>
                <div class="modal-body">
                    <h4 class="text-danger">
                        您确定要删除此任务吗?
                    </h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary delete-confirm">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>

        $(function () {
            window.isEdit = false;
            window.job_id = '';
            $('.create-job').click(function () {
                isEdit = false;
            });
            $('.edit-job').click(function () {
                isEdit = true;
            });
            $("body").on('click', '.save', function () {
                var name = $("#inputJobTitle").val(), status = $("input[type='radio']:checked").val();
                var data = {};
                if (name.length === 0) {
                    $.myAlert({'title':'出错提示','message':'请输入任务名称'});
                    return false;
                }
                if (status.length === 0) {
                     $.myAlert({'title':'出错提示','message':'请输入任务状态'});
                    return false;
                }
                function success(resp) {
                    var response = JSON.parse(resp);
                    if (response.code === '0') {//数据提交成功，并且成功存入数据库
                        $('#jobModal').modal('hide');
                        window.location.reload();
                    } else {
                        $.myAlert({'title':'出错提示','message':response.errmsg});
                    }
                }

                function error(ero) {
                    $.myAlert({'title':'出错提示','message':'出错啦'});
                }

                if (isEdit) {//修改任务
                    console.log(job_id);
                    data = {
                        "name":name,
                        "status":status,
                        "job_id":job_id
                    };
                    ajaxRequest('POST', '{{ url("app01:jobUpdate")}}', data, success, error, '{{ csrf_token }}');
                } else if (!isEdit) {//创建任务
                    data = {
                        'name': name,
                        'status': status
                    };
                    ajaxRequest('POST', '{{ url('app01:job',args=(project_id,)) }}', data, success, error, '{{ csrf_token }}');
                }


            });
        });

        //#jobModal标题的变化
        $('#jobModal').on('show.bs.modal', function (event) {
            var target = $(event.relatedTarget);
            var title = target.data('whatever');
            var modal = $(this);
            modal.find('.modal-title').html(title);
            //修改
            console.log(isEdit);
            if(isEdit){//对模态框赋值
                var data = target.parents('tr').data('line');
                job_id = target.parents('tr').data('id');
                modal.find('#inputJobTitle').val(data.name);
                modal.find('input[name="status"][value=' + data.status + ']').attr('checked', true);
            }
        });
        //删除任务
        $('#deleteModal').on('show.bs.modal',function(event){
            var target = $(event.relatedTarget);
            var job_id = target.parents('tr').data('id');
            var data = {
                'job_id':job_id
            };
            function success(resp) {
                $('#deleteModal').modal('hide');
                window.location.reload();
            }
            function error(ero) {
                $.myAlert({'title':'出错提示','message':'出错啦'});
            }
            $('.delete-confirm').click(function () {
                ajaxRequest('GET','{{ url("app01:jobDelete") }}',data,success,error,'{{ csrf_token }}');
            });
        });

    </script>
{% endblock %}

